import React, { useReducer } from 'react'
import { Switch, Route, Redirect } from "react-router-dom"
import Login from "./pages/Login/Login.jsx"
import Register from "./pages/Register/Register.jsx"
import Index from "./pages/Index/Index.jsx"
import List from "./pages/List/List.jsx"
import Detail from "./pages/Detail/Detail.jsx"
import Search from "./pages/Search/Search.jsx"
import "./less/index.less";
import { initState, reducer } from './store/index.js'

export const Mycontext = React.createContext()


export default function App() {
  const [state, dispatch] = useReducer(reducer, initState)
  return (
    <div className="container">
      {/* 路由视图 Switch  路由规则：Route 重定向:Redireact */}
      <Mycontext.Provider value={{ state, dispatch }}>
        <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
          <Route path="/index" component={Index}></Route>
          <Route path="/list" component={List}></Route>
          <Route path="/detail" component={Detail}></Route>
          <Route path="/search" component={Search}></Route>
          <Redirect to="/login"></Redirect>
        </Switch>
      </Mycontext.Provider>
    </div>
  )
}
